<template>
  <button v-if="msg<=5" v-btn @click="abtn">{{ msg }}</button>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
export default {
    setup () {
        const state = reactive({
            msg: 0
        })
        const abtn = () => {
            state.msg++
        }
        return {
            ...toRefs(state),
            abtn
        }
    },
    directives:{
        btn: {
            mounted: () => console.log('mounted'),
            updated: (el) => {
                el.innerHTML = '钩子函数' + el.innerHTML
                console.log('updated')
            },
            unmounted: () => console.log('unmounted')
        }
    }
}
</script>

<style>

</style>